<template>
  <div class="charge-system">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">收入日账-总视图</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker
            v-model="form.month"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="收入来源">
          <el-select v-model="form.dataSourceName" clearable>
            <el-option
              v-for="(item, index) in dataSourceNameList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品项">
          <el-select v-model="form.verticalIndexName" clearable>
            <el-option
              v-for="(item, index) in verticalIndexNameList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="form.number" clearable>
            <el-option
              v-for="item in CcustFlgTypeOptions"
              :key="item.number"
              :label="item.price"
              :value="item.number"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户群">
          <el-select v-model="form.custFlg" clearable>
            <el-option label="全部" value="全部"></el-option>
            <el-option label="政企" value="政企"></el-option>
            <el-option label="公众" value="公众"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否税后" style="width: 48%">
          <el-switch v-model="form.isAfterTax"> </el-switch>
          <el-checkbox size="mini" v-model="form.isHb">是否环比</el-checkbox>
          <el-button
            size="small"
            type="primary"
            style="margin-left: 12px"
            @click="queryHandle()"
            >查询</el-button
          >
          <el-button size="small" type="orange" @click="handle_export()"
            >导出</el-button
          >
          <el-button size="small" type="orange" @click="handle_sec()"
            >二级导出</el-button
          >
          <el-button size="small" type="orange" @click="handle_export('all')"
            >三级导出</el-button
          >
        </el-form-item>
      </el-form>
			<div class="table--top">
				<div class="notice-bar">
					<NoticeBar :text="noticeText"></NoticeBar>
				</div>
				<p class="g-unit">单位: 万元</p>
			</div>
      <div class="tableBox">
        <el-table
          border
          stripe
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          class="tableTh28"
          height="73vh"
          ref="table"
        >
          <el-table-column
            fixed
            prop="dataSourceName"
            label="收入来源"
            width="80px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            fixed
            prop="class1"
            label="收入项"
            width="80px"
          ></el-table-column>
          <el-table-column
            fixed
            prop="class2"
            label="收入面"
            width="100px"
          ></el-table-column>
          <el-table-column
            fixed
            prop="indexname"
            label="产品项"
            min-width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
          <el-table-column
            v-for="(it, i) in titles"
            :key="i"
            :prop="it.value"
            :label="it.label + '号 (' + it.week + ')'"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="real_33"
            label="33号(上月分摊)"
            min-width="120"
          >
          </el-table-column>
        </el-table>
        <div class="page-wrapper" v-if="tableData.length">
          <span class="totalNum">共{{ totalNum }}条</span>
          <el-pagination
            layout="prev, pager, sizes, next"
            :page-sizes="[10, 20, 50]"
            @size-change="sizeChange"
            :page-size="pageSize"
            :total="totalNum"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import { getMonthDays, getWeek } from "@/utils/common";
import prefixAPI from "@/api/prefixAPI";
import { months } from "moment";
import { downLoadExcelParams } from "@/utils/zipdownload.js";
export default {
  name: "Bill-tab1",
	components: {
		NoticeBar: () => import("@/components/NoticeBar")
	},
  data() {
    let nowYear = new Date().getFullYear();
    let nowMonth = new Date().getMonth() + 1;
    let month =
      nowMonth > 9 ? nowYear + "" + nowMonth : nowYear + "0" + nowMonth;
    return {
      titleName: [],
      tableLoading: false,
      form: {
        areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
        month: month,
        isAfterTax: true,
        isHb: false,
        dataSourceName: "",
        verticalIndexName: "",
        number: "",
        custFlg: "全部",
      },
      tableData: [],
      colList: [],
      titles: [],
      colnumName: [],
      // page: 1,
      pageSize: 50,
      currentPage: 1,
      // dataTotal: 0,
      totalNum: 0,
      dataSourceNameList: [],
      verticalIndexNameList: [],
      CcustFlgTypeOptions: [],

			noticeText: ""
    };
  },
  created() {
    this.submitHandle();
    this.getCcustFlgType();
    this.getRzMonErrLog();
  },
  methods: {
    getCcustFlgType() {
      $budgetAPI.getCcustFlgType(
				{}, 
				res => {
        this.CcustFlgTypeOptions = res.content;
      });
    },
    getRzMonErrLog() {
      $budgetAPI.getRzMonErrLog(
				{ acctMonth: this.form.month },
				res => {
					this.noticeText = res.content.toString();
				}
			);
    },
    getDataSourceName() {
      var that = this;
      $budgetAPI.getDataSourceName({}, (res) => {
        if (res && res.code == 0) {
          that.dataSourceNameList = res.content;
        }
      });
    },
    getVerticalIndexName() {
      var that = this;
      $budgetAPI.getVerticalIndexName({}, (res) => {
        if (res && res.code == 0) {
          that.verticalIndexNameList = res.content;
        }
      });
    },
    init() {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      this.form.areaId = this.accountInfo.areaId;
      this.getDataSourceName();
      this.getVerticalIndexName();
      this.submitHandle();
      // 删除或取服务器事件，改为前端或取
      // this.getMaxAcctMonthByDailyAccount();
    },
    //页码改变
    sizeChange(val) {
      this.pageSize = val;
      this.submitHandle();
    },
    //翻页操作
    handleCurrentChange(page) {
      this.currentPage = page;
      this.submitHandle();
    },
    //请求数据
    submitHandle() {
      var that = this,
        areaId = this.form.areaId,
        acctMonth = this.form.month,
        isAfterTax = this.form.isAfterTax,
        isHb = this.form.isHb,
        number = this.form.number ? this.form.number : "",
        year = that.form.month.substr(0, 4),
        month = that.form.month.substr(4, 2),
        dataSourceName = that.form.dataSourceName,
        verticalIndexName = that.form.verticalIndexName,
        count = getMonthDays(year, month),
        custFlg = this.form.custFlg || null;

      let params = {
        areaId,
        acctMonth,
        isAfterTax,
        isHb,
        number,
        dataSourceName,
        verticalIndexName,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      if (custFlg) params.custFlg = custFlg;
      that.tableLoading = !0;
      that.tableData = [];
      that.titles = Array.from(new Array(count), (it, i) => {
        var index = i + 1 < 10 ? "0" + (i + 1) : i + 1;
        return {
          value: isHb ? "hb_" + index : "real_" + index,
          label: i + 1 + "",
          week: getWeek(year + "-" + month + "-" + index),
        };
      });
      // that.titles.push({
      //     label: '33',
      //     value: 'real_33',
      //     week: ''
      // })
      
      $budgetAPI.dailyGetList2022(
        params,
        (res) => {
          this.tableLoading = false;
          if (res.code == 0) {

            that.tableData = res.content.items;
            that.totalNum = res.content.totalNum;
            that.$nextTick(() => {
              that.$refs.table.doLayout();
            });
          }
        },
        (err) => {
          this.tableLoading = false;
        }
      );
    },
    //查询
    queryHandle() {
      this.currentPage = 1;
      this.submitHandle();
			this.getRzMonErrLog();
    },
    // 生成tableData数据
    createTableData(dataArr) {
      let result = dataArr.map((item, index) => {
        return { ...item, ...item.data };
      });
      return result;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3
      ) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    handle_export(type) {
      let areaId = this.form.areaId,
        acctMonth = this.form.month,
        isAfterTax = this.form.isAfterTax,
        isHb = this.form.isHb,
        number = this.form.number ? this.form.number : "",
        dataSourceName = this.form.dataSourceName,
        verticalIndexName = this.form.verticalIndexName,
        token = getCookie("token"),
        custFlg = this.form.custFlg;
      let params = {
        areaId,
        acctMonth,
        isAfterTax,
        isHb,
        number,
        dataSourceName,
        verticalIndexName,
        token,
      };
      if (custFlg) params.custFlg = custFlg;
      downLoadExcelParams(
        type ? "/dailyOutAccountTwo/exportBatch" : "/dailyOutAccountTwo/export",
        params,
        `收入日帐-总视图${type ? "-三级导出" : ""}`
      );
    },
    handle_sec() {
      let areaId = this.form.areaId,
        acctMonth = this.form.month,
        number = this.form.number ? this.form.number : "",
        isAfterTax = this.form.isAfterTax,
        isHb = this.form.isHb,
        dataSourceName = this.form.dataSourceName,
        verticalIndexName = this.form.verticalIndexName,
        token = getCookie("token"),
        custFlg = this.form.custFlg;
      let params = {
        areaId,
        acctMonth,
        isAfterTax,
        isHb,
        number,
        dataSourceName,
        verticalIndexName,
        token,
      };
      if (custFlg) params.custFlg = custFlg;
      downLoadExcelParams(
        "/dailyOutAccountTwo/exportTwoBatch",
        params,
        `收入日帐-总视图-二级导出`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  display: flex;
  align-items: center;
  text-align: right;
  justify-content: flex-end;
  padding: 15px 0;
  .totalNum {
    color: #999;
  }
}
.charge-system {
  .daochu {
    .el-form-item__content {
      float: right;
      width: 100%;
    }
  }
}
.table--top {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 20px 0;
	.notice-bar {
		width: 550px;
	}
	.g-unit {
		text-align: right;
    flex: 1;
		transform: translateY(10px);
	}
}
</style>
